
<template>
    <div class="map-marking">
        <div class="marking-setting-content">
            <div class="marking-type-box box-item">
                <ul>
                    <li v-for="(item,index) in markingData" @click="handleIcon(item,index)" :title="item.label">
                        <img :src="activeIcon === item.icon ? getAssetsFile(`cesium/marking/active/${item.icon}.png`) : getAssetsFile(`cesium/marking/${item.icon}.png`)" alt="" srcset="">
                        <span  :class="activeIcon === item.icon ? 'active-text' : ''">{{ item.label }}</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
  </template>
  
  <script setup lang="ts">
import { useCesiumGlobalStore } from "@/store/modules/cesiun-global"
import { getAssetsFile } from "@/utils/index"
import { useCesiumEditStore } from "@/store/modules/cesium-edit";
import { onMounted, onUnmounted, ref } from "vue";
import markingData from './setting'
import drawPoint from "@/cesium/sign/point";
// import Arrow from "@/cesium/sign/drawPlot";
  const cesiumGlobalStore = useCesiumGlobalStore()
  const cesiumEditStore = useCesiumEditStore()
  let activeIcon = ref('')
const viewer = cesiumGlobalStore.getViewer()
let test = new drawPoint(viewer)
// Arrow.disable();
// Arrow.init(viewer);
const handleIcon = (item,index) => {
    
    if(activeIcon.value !== item.icon) {
        activeIcon.value = item.icon
    }else{
        activeIcon.value = ''
        test.destroyed()
        cesiumGlobalStore.getSign(false)
        return
    }
    if(item.icon === 'bjd'){
        cesiumGlobalStore.getSign(true)
        activeIcon.value = item.icon
        test.drawSign({
            imgSrc: getAssetsFile(`cesium/sign/point.png`),
        })
        cesiumEditStore.plotting.imageConfig.name = item.label
        cesiumEditStore.plotting.src = getAssetsFile(`cesium/sign/point.png`)
    }
    // else if(item.icon === 'ddywxjt'){
    //     Arrow.draw("attackArrow");
    // }else if(item.icon === 'sjt'){
    //     Arrow.draw("pincerArrow");
    // }
    //     // cesiumGlobalStore.loader = new drawPoint(viewer, {
        //     imgSrc: getAssetsFile(`cesium/sign/point.png`),
        //     name: 'dian'
        // })
}


  </script>
  
  <style scoped lang="less">
.map-marking{
    .marking-setting-content{
        .clear-box{
            text-align: center;
            margin-top: 20px;
        }
        .clear-btn{
            margin: 0 auto;
        }
        ul{
            padding: 0;
            margin: 0;
            display: flex;
            flex-wrap: wrap;
            width: 260px;
        }
        li{
            cursor: pointer;
            margin: 10px;
            // border-bottom: 1px solid #eee;
            .marking-title{
                color: #999;
                font-size: 14px;
                line-height: 32px;
            }
            list-style:none;
            width: 60px;
            text-align: center;
            img{
                margin-left: 10px;
                width: 40px;
                display: block;
            }
            span{
                margin-top: 3px;
                display: inline-block;
                font-size: 12px;
                max-width:100%;
                overflow:hidden;/*内容超出后隐藏*/
                text-overflow:ellipsis;/*超出内容显示为省略号*/
                white-space:nowrap;/*文本不进行换行*/
            }
        }
        li:hover span{
            color: #3b7cff;
        }
        .active-text{
                color: #3b7cff;;
            }
    }
}
  </style>
  